<template>
	<u-popup :show="visible" round="16rpx" mode="bottom" @close="hide">
		<view class="quick-group-remove-member">
			<view class="quick-group-remove-member__head">
				<text>添加小组成员</text>
				<view class="quick-group-remove-member__head-close bg-hover" @tap="hide">
					<u-image width="32rpx" height="32rpx"
						src="https://file.casugn.com/storecompcard/static/img/tips／close@2x_1681978220794.png"></u-image>
				</view>
			</view>

			<scroll-view class="quick-group-remove-member__content" scroll-y>
				<view>
					<view class="quick-group-remove-member__content-module bg-hover" v-for="(item,index) in items" :key="index">
						<u-avatar
							:src="item.icon||'https://file.casugn.com/storecompcard//GFnT1GaT8CD9089ddbabd7d7c2180f52b649e7945ba7_1661907569321.png'"
							size="64rpx"></u-avatar>
						<view class="quick-group-remove-member__content-module-name">
							<text>{{item.name||'[[未填写姓名]]'}}</text>
							<text v-if="item.profile">{{item.profile}}</text>
						</view>
						<template v-if="!item.loading">
							<view class="quick-group-remove-member__content-module-btn" @tap.stop.prevent="addHandle(item,index)">
								<u-icon v-if="item.roleIdentify!==0" name="plus-circle" color="#7b77fe" size="50"></u-icon>
							</view>
						</template>
						<u-loading-icon v-else size="28rpx"></u-loading-icon>
					</view>

					<template v-if="loadMoreStatus!=='loading'&&!items.length">
						<u-empty marginTop="30rpx" width="240rpx" height="240rpx" text="暂时没有可添加人员" textSize="28rpx"
							textColor="#86909C"
							icon="https://file.casugn.com/storecompcard/temp/空页面@2x(11)_1681113828976.png"></u-empty>
					</template>

					<template v-if="loadMoreStatus==='loading'">
						<u-loadmore height="100" fontSize="28rpx" iconSize="34rpx" :status="loadMoreStatus"
							@loadmore="scrolltolower" />
					</template>
				</view>
			</scroll-view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		options: {
			styleIsolation: 'shared', // 解除样式隔离
		},
		data() {
			return {
				visible: false,
				groupObj: {},

				items: [],
				loadMoreStatus: 'nomore', //loading / nomore / loadmore
			}
		},
		methods: {
			show(record) {
				this.visible = true
				this.groupObj = JSON.parse(JSON.stringify(record))

				this.loadMoreStatus = 'loading'
				this.getDBData()
			},
			hide() {
				this.visible = false
			},
			// 获取群成员，在父级群聊但不在子集群聊
			async getDBData(type = 'refresh') {
				let params = {
					id: this.groupObj.id,
					parentId: this.groupObj.parentId,
				}

				let res = await this.$api.queryMemberLack(params)
				if (res.success) {
					this.items = res.result
					this.loadMoreStatus = 'nomore'
				} else {
					this.loadMoreStatus = 'nomore'
				}
			},
			async addHandle(item, index) {
				// console.log(item, '添加人信息')
				let params = {
					groupId: this.groupObj.id,
					openId: item.openId,
					icon: item.icon,
					name: item.name,
					mobile: item.mobile,
					profile: item.profile,
				}
				this.$set(item, 'loading', true)
				let res = await this.$api.addQuickGroupMembers(params)
				if (res.success) {
					uni.showToast({ title: '添加成功！', icon: 'none' });
					this.$set(item, 'loading', false)
					this.items.splice(index, 1)
				} else {
					uni.showToast({ title: res.message || '添加失败！', icon: 'none' });
					this.$set(item, 'loading', false)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.quick-group-remove-member {
		position: relative;
		height: 60vh;

		.quick-group-remove-member__head {
			position: relative;
			height: 92rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #1D2129;
			line-height: 44rpx;
			background-color: #fff;

			display: flex;
			justify-content: center;
			align-items: center;

			.quick-group-remove-member__head-close {
				position: absolute;
				top: 30rpx;
				right: 32rpx;
			}
		}

		.quick-group-remove-member__content {
			position: relative;
			height: calc(100% - 92rpx);
			padding: 24rpx 32rpx;
			background-color: #F7F8FA;
			box-sizing: border-box;

			.quick-group-remove-member__content-module {
				padding: 24rpx;
				background-color: #fff;
				box-sizing: border-box;
				border-radius: 8rpx;

				display: flex;
				align-items: center;

				&:nth-child(n+2) {
					margin-top: 24rpx;
				}

				.quick-group-remove-member__content-module-name {
					padding: 0 20rpx;

					display: flex;
					flex-direction: column;

					text:nth-child(1) {
						font-size: 32rpx;
						font-weight: 600;
						color: #1D2129;
						line-height: 44rpx;
					}

					text:nth-child(2) {
						margin-top: 10rpx;
						font-size: 22rpx;
						color: #999;
						line-height: 30rpx;
					}
				}

				.quick-group-remove-member__content-module-btn {
					margin-left: auto;
				}
			}
		}
	}
</style>